<template>
  <section id="projects" class="py-20 bg-white" ref="projectsSection">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-16 text-gray-800 transform translate-y-8 opacity-0 transition-all duration-700">项目作品</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 项目卡片 1 -->
        <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 transform translate-y-10 opacity-0" style="transition-delay: 100ms">
          <div class="overflow-hidden">
            <img src="https://picsum.photos/id/0/600/400" alt="数据分析平台" class="w-full h-48 object-cover transition-transform duration-700 hover:scale-110">
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2 transform translate-y-4 opacity-0 transition-all duration-500 delay-300">企业数据分析平台</h3>
            <p class="text-gray-600 mb-4 transform translate-y-4 opacity-0 transition-all duration-500 delay-400">基于Vue.js和Node.js构建的企业级数据分析平台，支持实时数据可视化。</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center transform translate-y-4 opacity-0 transition-all duration-500 delay-500">
              查看详情
              <svg class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
              </svg>
            </a>
          </div>
        </div>

        <!-- 项目卡片 2 -->
        <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 transform translate-y-10 opacity-0" style="transition-delay: 300ms">
          <div class="overflow-hidden">
            <img src="https://picsum.photos/id/180/600/400" alt="电商管理系统" class="w-full h-48 object-cover transition-transform duration-700 hover:scale-110">
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2 transform translate-y-4 opacity-0 transition-all duration-500 delay-300">电商管理系统</h3>
            <p class="text-gray-600 mb-4 transform translate-y-4 opacity-0 transition-all duration-500 delay-400">全栈开发的电商管理系统，包含商品管理、订单处理、用户分析等功能。</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center transform translate-y-4 opacity-0 transition-all duration-500 delay-500">
              查看详情
              <svg class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
              </svg>
            </a>
          </div>
        </div>

        <!-- 项目卡片 3 -->
        <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 transform translate-y-10 opacity-0" style="transition-delay: 500ms">
          <div class="overflow-hidden">
            <img src="https://picsum.photos/id/160/600/400" alt="社交网络应用" class="w-full h-48 object-cover transition-transform duration-700 hover:scale-110">
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2 transform translate-y-4 opacity-0 transition-all duration-500 delay-300">社交网络应用</h3>
            <p class="text-gray-600 mb-4 transform translate-y-4 opacity-0 transition-all duration-500 delay-400">基于React和Node.js开发的社交网络应用，支持实时聊天和内容分享。</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center transform translate-y-4 opacity-0 transition-all duration-500 delay-500">
              查看详情
              <svg class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
              </svg>
            </a>
          </div>
        </div>

        <!-- 项目卡片 4 -->
        <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 transform translate-y-10 opacity-0" style="transition-delay: 700ms">
          <div class="overflow-hidden">
            <img src="https://picsum.photos/id/160/600/400" alt="社交网络应用" class="w-full h-48 object-cover transition-transform duration-700 hover:scale-110">
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2 transform translate-y-4 opacity-0 transition-all duration-500 delay-300">社交网络应用</h3>
            <p class="text-gray-600 mb-4 transform translate-y-4 opacity-0 transition-all duration-500 delay-400">基于React和Node.js开发的社交网络应用，支持实时聊天和内容分享。</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center transform translate-y-4 opacity-0 transition-all duration-500 delay-500">
              查看详情
              <svg class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const projectsSection = ref(null);

onMounted(() => {
  // 检测元素是否在视口中
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 显示标题
        const title = entry.target.querySelector('h2');
        if (title) {
          title.style.transform = 'translateY(0)';
          title.style.opacity = '1';
        }

        // 显示项目卡片
        const projectCards = entry.target.querySelectorAll('.grid > div');
        projectCards.forEach(card => {
          card.style.transform = 'translateY(0)';
          card.style.opacity = '1';
          // 显示卡片内元素
          const cardTitle = card.querySelector('h3');
          const cardDesc = card.querySelector('p');
          const cardLink = card.querySelector('a');
          if (cardTitle) {
            cardTitle.style.transform = 'translateY(0)';
            cardTitle.style.opacity = '1';
          }
          if (cardDesc) {
            cardDesc.style.transform = 'translateY(0)';
            cardDesc.style.opacity = '1';
          }
          if (cardLink) {
            cardLink.style.transform = 'translateY(0)';
            cardLink.style.opacity = '1';
          }
        });
      }
    });
  }, { threshold: 0.1 });

  if (projectsSection.value) {
    observer.observe(projectsSection.value);
  }
});
</script>